<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件-->
    <script src = "js/vue.js"></script>
</head>
<body>
    <!--创建一个容器-->
    <div id="app">
          <!-- 点击按钮，讲文本框的内容输出到控制台
               希望用按键修饰符也做到同样的功能

               这里设计到如果获取文本框对象.
               vue已经不再推荐大家使用dom技术获取。也就是说，我们不再使用
               document.getElemetById()这样类似的方式去获取。

               那么怎么获取呢？
               vue提供了一个$refs属性大家先观察一下
               $refs属性类似于id属性
               this.$refs.ref的值 === document.getElementById('id的值')
        -->
        <input ref = "in"><button @click = "fun">点我输出文本框的内容</button>

        <input ref = "in1" @keyup.lazy.enter = "fun1">
    </div>
   
    <script>
        //创建一个控制器，控制容器显示的数据
        let vm = new Vue({
            el: '#app' ,  //控制那个容器
            methods: {
                fun() {
                  // console.log(this)  //注意，这里的this是vue实例对象也就是vm.
                  console.log(this.$refs.in.value)
                } ,
                fun1(){
                    console.log(this.$refs.in1.value)
                }
            },
        })
    </script>
</body>
</html>